<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>批量操作</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
</style>
</head>
<body>
	<div class="container">
		<h1>批量操作</h1>
	</div>
	<script src="php/ajax.js"></script>
	<script type="text/javascript">

/*
function ajax(url, resolve, reject) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.send();
  xhr.onload = function() {
    if (this.status == 200) {
      resolve(JSON.parse(this.response));
    } else {
      reject(this);
    }
  };
}
ajax("http://localhost:8888/php/user.php?name=向军", user => {
  ajax(
    `http://localhost:8888/php/houdunren.php?id=${user["id"]}`,
    response => {
      console.log(response[0]);
    }
  );
});

*/

/**
 * 异步回调的方式
 * @return {[type]} [description]
 */
function v1() {

	let host = "http://localhost:8888/php";
	ajax(`${host}/user.php?name=后盾人`, user => {
		console.log('user = ', user)
		
		ajax(`${host}/houdunren.php?id=${user.id}`, lessons=> {
			console.log('lessons = ', lessons)
		})
	})
}
v2()

/**
 * Promise的方式
 * @return {[type]} [description]
 */
function v2() {

	let host = "http://localhost:8888/php";
	ajax(`${host}/user.php?name=后盾人`)
	.then(user => {
		console.log('Promise user = ', user)
		return user
	}).then(user => {
		return ajax(`${host}/houdunren.php?id=${user.id}`)
	}).then(lessons=> {
		console.log('Promise lessons = ', lessons)
	})
}

/**
 * async + await
 * @return {[type]} [description]
 */
 function v3() {
 	async function get(name) {
 		let host = "http://localhost:8888/php";
 		let user = await ajax(`${host}/user.php?name=${name}`);
 		let lessons = await ajax(`${host}/houdunren.php?id=${user.id}`);
 		console.log(lessons);
 	}
 	get("后盾人");
 }

	</script>
</body>
</html>